<template>
  <ScenicScreen v-model="list.filter.scenicId">
    <div class="app-container">
      <el-form
        ref="listFilterRef"
        :model="list.filter"
        inline
        class="list-filter"
      >
        <el-form-item prop="noticeName">
          <el-input
            v-model="list.filter.noticeName"
            placeholder="公告名称"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-form-item>
        <el-form-item prop="scenicName">
          <el-input
            v-model="list.filter.scenicName"
            placeholder="景区名称"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-form-item>
        <el-form-item prop="status">
          <KiSelect
            :index.sync="list.filter.status"
            :options="['停用', '启用']"
            placeholder="状态"
          />
        </el-form-item>
        <el-form-item prop="effect">
          <!-- <KiSelect
            v-model="list.filter.effect"
            :options="options.effect"
            placeholder="是否生效"
          /> -->
          <el-select v-model="list.filter.effect" filterable clearable placeholder="是否生效">
            <el-option
              v-for="item in options.effect"
              :key="item.dataValue"
              :label="item.dataName"
              :value="item.dataValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form>

      <div class="table-operation">
        <span>
          <el-button
            v-if="hasBtn['新增']"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="c"
          >
            新增
          </el-button>
        </span>
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>

      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column label="公告名称" prop="title" />
        <el-table-column label="景区名称" prop="scenicName" v-if="!list.filter.scenicId"/>
        <el-table-column label="发布人" prop="publishUserName" />
        <el-table-column label="发布账号" prop="publishUserAccount" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="生效起期" prop="startTime" />
        <el-table-column label="生效止期" prop="endTime" />
        <el-table-column label="公共内容" prop="content"> 
          <template slot-scope="{ row }">
            <el-button @click="preview(row)" size="mini">预览</el-button>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{ row: { noticeId, status } }">
            <KiPopSwitch
              v-bind="popSwitchProps(status)"
              @change="updateStatus({ id: noticeId, status: status ^ 1 })"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row: { noticeId, auditStatus } }">
            <KiPopButton
              v-if="hasBtn['查看']"
              @click="r({ id: noticeId }, 'config')"
            >
              查看
            </KiPopButton>
            <KiPopButton
              v-if="
                hasBtn['编辑'] && ![2, 4].includes(auditStatus)
              "
              @click="u({ id: noticeId }, 'config')"
            >
              编辑
            </KiPopButton>
            <KiPopButton
              v-if="hasBtn['删除']" text="![#FF7575]"
              :elPopconfirmProps="{ title: '确认删除吗？' }"
              @click="d({ id: noticeId })"
            >
              删除
            </KiPopButton>
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
      >
        <template #el-form>
          <el-form-item label="景区" prop="scenicId" verify>
            <!-- <KiSelect
              v-model="form.data.scenicId"
              :options="options.scenic"
              :props="{ value: 'scenicId', label: 'scenicName' }"
            /> -->
            <el-select v-model="form.data.scenicId" filterable clearable placeholder="景区">
              <el-option
                v-for="item in options.scenic"
                :key="item.scenicId"
                :label="item.scenicName"
                :value="item.scenicId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公告名称" prop="title" :verify="{ maxLength: 45 }">
            <el-input
              v-model="form.data.title"
              placeholder="请输入公告名称"
              maxlength="30"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item label="发布人" prop="publishUserName" :verify="{ maxLen: 10 }">
            <el-input
              v-model="form.data.publishUserName"
              placeholder="请输入发布人"
              maxlength="10"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item label="生效开始时间" prop="startTime" verify>
            <el-date-picker
              v-model="form.data.startTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择开始时间"
              :picker-options="{ 
                disabledDate: time => $dayjs(time).isBefore($dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')) || (form.data.endTime && $dayjs(time).isAfter($dayjs(form.data.endTime) )  ) 
              }"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="生效结束时间" prop="endTime">
            <el-date-picker
              v-model="form.data.endTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择结束时间"
              :picker-options="{ 
                disabledDate: time => $dayjs(time).isBefore($dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'))  || (form.data.startTime && $dayjs(time).isBefore( $dayjs(form.data.startTime) ) )  
              }"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="公告详情" prop="content" verify>
            <MiniMCE v-model="form.data.content" :disabled="form.status === 'r'"/>
          </el-form-item>
        </template>
      </KiFormDialog>

      <el-dialog
        title="预览"
        :visible.sync="richTextPreview"
        :close-on-click-modal="false"
      >
        <div v-html="rowRichText"></div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="richTextPreview = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </ScenicScreen>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import ScenicScreen from '@/components/ScenicScreen'

export default {
  mixins: [pageMixin],
  components: { ScenicScreen },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/scenic/notice',
      axiosConfig: {
        getList: {
          url: 'list'
        },
        d: {
          method: 'DELETE'
        },
        r: ({ id }) => ({
          url: id
        })
      }
    }),
  data () {
    return {
      options: {
        scenic: [],
        effect : [
          {
            dataName : "生效",
            dataValue : true
          },
          {
            dataName : "未生效",
            dataValue : false
          },
        ]
      },
      richTextPreview: false,
      rowRichText: '',
    }
  },
  created () {
    this.$POST('sot-admin-api/scenic/queryCurrentScenicList', {
      //showAllFlag: 1
    }).then(res => {
      this.options.scenic = this.options.scenic.concat(res.data)
    })
  },
  methods: {
    preview (row) {
      this.rowRichText = row.content
      this.richTextPreview = true
    }
  }
}
</script>

<style scoped></style>
